import React, { Suspense } from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'
import Loading from '../components/Loading'
import NoFound from '../components/NoFound'
import Protect from './protect'


const Login = React.lazy(() => import(/*webpackChunkName:"login" */ '../components/Login'));
const MyLayout = React.lazy(() => import(/*webpackChunkName:"layout" */ '../components/Layout'));
// React.lazy 结合 Suspense 可以实现 组件的按需加载
interface Iprops {
  name: string
}

const App: React.FC<Iprops> = function (props) {
  // 正常登录和 正常能看的页面是兄弟
  return <HashRouter>
    <Suspense fallback={<Loading />}>
      <Switch>
        <Route path='/login' component={Login}></Route>
        <Route path='/404' component={NoFound}></Route>
        <Protect path='/' component={MyLayout}></Protect>
      </Switch>
    </Suspense>
  </HashRouter>
}

export default App